<template>
  <div>

    <template>
      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        >
        <el-table-column
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column
            type="index"
            width="80"
            label="编号"
            align="center">
        </el-table-column>
        <el-table-column
            prop="goods.goodsName"
            align="center"
            label="商品名称"
        >
        </el-table-column>
        <el-table-column
            prop="price"
            align="center"
            label="需付金额">
        </el-table-column>



        <el-table-column
            prop="count"
            align="center"
            label="数量">
        </el-table-column>
        <el-table-column
            align="center"
            label="修改数量">
          <template slot-scope="scope">
            <el-button-group>
              <el-button icon="el-icon-minus" v-if="scope.row.count>=2"
                         @click="scope.row.count=scope.row.count-1"></el-button>
              <el-button icon="el-icon-plus" @click="scope.row.count=scope.row.count+1"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope2">
            <el-button type="success" icon="el-icon-check" @click="changeG(scope2.row)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteGoods(scope2.row)" circle></el-button>
          </template>

        </el-table-column>

      </el-table>

      <div>


        <el-card class="box-card" v-if="cardStatus">
          <span>您共选择了{{ multipleSelectionSize }}件商品,请确定购物车！</span>
          <el-button type="text" style="float:right" @click="submitData">确定</el-button>

        </el-card>
        <el-card class="box-card" v-if="cardStatus==false">
          <span>您确认了{{ multipleSelectionSize }}件商品,快去支付吧！</span>
          <el-button type="text" style="float:right" @click="cancelSubmit">取消</el-button>
        </el-card>
        <router-link :to="{
          path:'/pay',
          query:{
            orderData:this.addOrderData,
            spend: this.spend,
          }
        }">
          <el-button style="float:right;margin:5px" v-if="cardStatus==false">去支付</el-button>
        </router-link>
      </div>


    </template>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "shoppingCart",

  data() {
    return {

      spend:0,
      deleteG: {
        cartId: 1,
      },

      uId: JSON.parse(sessionStorage.getItem('user'))===null?'null':JSON.parse(sessionStorage.getItem('user')).id,

      addOrderData: [
        {
          goodsId: "1",
          price: "1000",
          count: 5,
          userId: "1",
        },
        {
          goodsId: "2",
          price: "1000",
          count: 5,
          userId: "1",
        }

      ],
      cardStatus: true,
      multipleSelection: [],
      multipleSelectionSize: 0,
      tableData: [],

      changeGoods: {
        id: '',
        goodsId: '',
        price: 0,
        count: 1,
        userId: ''
      }

    }
  },
  mounted() {
    //页面挂载执行
    console.log(this.$route);
    this.selectAll();
  },
  methods: {
    cancelSubmit(){
      this.cardStatus = true;
    },

    submitData() {

      if (this.multipleSelectionSize == 0) {
        this.cardStatus = true;
      } else {
        this.cardStatus = false;
        this.addOrderData=this.multipleSelection;
        for(var i =0;i<this.addOrderData.length;i++){
          this.spend=this.spend+this.addOrderData[i].price;
        }
        console.log(this.spend)
      }

    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
      this.multipleSelectionSize = val.length;
    },
    //这是进入购物车时搜索所有订单的方法：
    selectAll() {
      axios({
        method: "get",
        url: "http://localhost:8088/userCart",
        params:{uId:this.uId,}
      }).then(resp => {
        this.tableData = resp.data;
      })
    },

    changeG(row) {
      this.$confirm('此操作将更新数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeGoods.id = row.id;
        this.changeGoods.goodsId = row.goodsId;
        this.changeGoods.count = row.count;
        this.changeGoods.price = row.price;
        this.changeGoods.userId = row.userId;
        axios({
          method: "post",
          url: "http://localhost:8088/editCart",
          params: this.changeGoods
        }).then(resp => {
          //返回值不等于空则成功
          if (resp.data != '') {
            // this.selectAll();
            this.$message({
              message: '成功，信息已更新！',
              type: 'success'
            });
            //改变成功后要重新查询所有的购物车，看是否发生了改变
            this.selectAll();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
      // // this.selectId=


    },
    deleteGoods(row) {
      //发送删除请求：
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        
      }).then(() => {
        this.deleteG.cartId = row.id;
        console.log(row.id);
        axios({
          method: "delete",
          url: "http://localhost:8088/delCart",
          //data: this.deleteG.cartId
          params: this.deleteG
          
        }).then(resp => {
          //resp.setHeader("Access-Control-Allow-Origin", "*");
          if (resp.data) {
            // this.selectAll();
            this.$message({
              message: '成功，信息已删除！',
              type: 'success'
            });
            this.selectAll()
            //location.reload()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      // // this.selectId=
    },

    increase(scope) {
      console.log(scope.count)
    }

  }

}
</script>

<style lang="css" scoped>
.box-card {
  margin: 5px;

}
</style>